<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/echarts/echarts.min.js"></script>
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>物品快照图表显示的是比例(某时间的数值与当天最大值的比例)</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select">
                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">当天时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="date" id="createTime0"
                                       placeholder="开始时间" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                        
                        <div class="layui-inline">
                            <label class="layui-form-label">天数间隔:</label>
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="beginDateTime" id="beginDateTime" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="endDateTime" id="endDateTime" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon"></i>搜 索</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-normal" v-on:click="checkboxAll()">全选/反选</button>
                        </div>
                        <div class="layui-form">
                            <input type="checkbox" name="equipId[]" :value="item.equip_id" :title="item.name" lay-skin="primary" v-for="item in equipMonitors"
                                   :checked="item.checked===true">
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div id="container" style="height: calc(100vh - 200px);width:100%"></div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    var equipments = getEnum('equip')
    var equip_monitor_ids = getEnum('equip_monitor_ids')
    var equipMonitors = [];
    form = null;
    function getEquipName(itemId) {
        for(var k in equipments){
            if (equipments[k].id === itemId){
                return equipments[k].name;
            }
        }
        return itemId;
    }
    equip_monitor_ids.forEach(x=>{
        equipMonitors.push({
            equip_id:x,
            name:getEquipName(x),
            checked:false,
        })
    })

    new Vue({
        el: "#app",
        data: {
            services: JSON.parse(localStorage.getItem('services')),
            equipMonitors:equipMonitors,
            isCheckboxAll:false, // equipMonitors是否全选
        },
        methods:{
            checkboxAll:function(){
                var _this = this;
                _this.isCheckboxAll = !_this.isCheckboxAll;
                _this.equipMonitors.forEach(item=>{
                    item.checked = _this.isCheckboxAll
                })
            }
        },
        updated:function(){
            form.render();
        },
        mounted: function () {
            layui.use(['form', 'table','laydate'], function () {
                form = layui.form;
                var $ = layui.jquery,
                    table = layui.table,
                    laydate=layui.laydate;
                laydate.render({
                    elem: '#createTime0',
                    value: getYmd(0)
                });
                laydate.render({
                    elem: '#beginDateTime',
                    value: getYmd(0)
                });
                laydate.render({
                    elem: '#endDateTime',
                    value: getYmd(1),
                });
                var dom = document.getElementById('container');

                function showEcharts(){
                    var myChart = echarts.init(dom, null, {
                        renderer: 'canvas',
                        useDirtyRect: false
                    });
                    var where = form.val('table-search');
                    var option;
                    $.get("/admin/item/snapshoot",where,function(res){
                        if (res.code!==0){
                            layer.msg(res.msg,{icon:2})
                            return;
                        }
                        var resData = res.data;
                        var results = res.data.results;
                        var equipIds = [];
                        results.forEach(row=>{
                            equipIds.push(row.equip_id)
                        })
                        equipIds = [...new Set(equipIds)]; //去重
                        var equipNames = [];
                        equipIds.forEach(equipId=>{
                            let maxValue = 0;
                            results.forEach(resultItem=>{
                                if (resultItem.equip_id === equipId){
                                    if (maxValue < resultItem.equip_sum) {
                                        maxValue = resultItem.equip_sum
                                    }
                                }
                            })
                            equipNames.push(getEquipName(equipId))
                        })

                        var series = [];
                        equipIds.forEach(equipId=>{
                            var seriesData = [];
                            resData.xAxisData.forEach(hi=>{
                                let thisHiEquipNum = null;
                                results.forEach(resultItem=>{
                                    if (resultItem.equip_id === equipId && resultItem.hi === hi){
                                        let equip_sum = resultItem.equip_sum;
                                        thisHiEquipNum = equip_sum
                                    }
                                })
                                seriesData.push(thisHiEquipNum)
                            })

                            series.push({
                                name: getEquipName(equipId),
                                type: 'line',
                                stack: 'Total',
                                data: seriesData
                            })
                        })
                        myChart.clear();
                        option = {
                            title: {
                                text: '',
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: equipNames,
                                show:false,
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: resData.xAxisData
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: series
                        };
                        if (option && typeof option === 'object') {
                            myChart.setOption(option);
                        }
                        window.addEventListener('resize', myChart.resize);
                    })
                }

                // 监听搜索操作
                form.on('submit(data-search-btn)', function () {
                    showEcharts()
                    return false;
                });


            });
        }
    })

</script>
</body>
</html>